<template>
  <div class="myDiv">
    <div class="header">
      <el-button @click="back" style="height: 40px; color: #409eff; cursor: pointer">
        <span>
          <i class="el-icon-arrow-left"></i>
          返回
        </span>
      </el-button>
      <UserAcatar @transfer="change" />
    </div>
    <div class="content" v-loading="loading">
      <div class="detailDesc" v-if="data.assignment_title">
        <div style="
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
          ">
          <p style="color: #fdcb9e; font-size: 25px">
            {{ data.assignment_title }} ({{ data.course_name }})
          </p>
          <span style="color: #cceabb; font-size: 25px">{{ data.total_points }}分</span>
        </div>
        <div style="display: flex; justify-content: space-between">
          <div style="display: flex; align-items: center">
            发布教师：<span>{{ data.teacher_name }}</span>
            <span style="margin-left: 10px; color: #909399; margin-right: 10px">发布时间: {{ formatDateTime(data.publish_time)
            }}
            </span>
            <img src="../../../public/submitAssignment/提交.svg" alt="" />
            <span style="color: #909399">{{ data.publish_number }}</span>
            <img src="../../../public/submitAssignment/未提交.svg" alt="" />
            <span style="color: #909399">{{
              data.totalNumber - data.publish_number
            }}</span>
            <img src="../../../public/submitAssignment/已批阅.svg" alt="" />
            <span style="color: #909399">{{ data.totalNumber }}</span>
          </div>
          <div class="time">
            <i class="el-icon-bell"></i>
            截止时间:<span class="times">{{
              formatDateTime(data.deadline)
            }}</span>
          </div>
        </div>
      </div>

      <div class="detail">
        <p style="color: #fdfdee; font-size: 25px">作业说明</p>
        <div class="prism" v-html="data.assignment_describe"></div>
      </div>
      <div
        style="width: 100%; margin: auto; display: flex; justify-content: center; margin-top: 50px; margin-bottom: 100px">
        <el-button @click="writeAssignment(data.assignment_id)" type="success" v-if="status === 'unpublished'"> 开始写作业
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import UserAcatar from "@/components/UserAcatar.vue"; //引入组件
import "../../assets/font/prism.css"; // 引入Prism.js样式文件
import Prism from "prismjs";

export default {
  name: "SubmitDetail",
  components: {
    UserAcatar,
  },
  data() {
    return {
      workobj: {},
      workid: "",
      deadline: "",
      workcontent: {},
      finishedList: [
        {
          studentId: 1,
          studentName: "RICK",
        },
        {
          studentId: 2,
          studentName: "SOY",
        },
      ],
      data: [],
      loading: false,
      status: "",
    };
  },
  methods: {
    // 将头像组件中的路由再传递给homeview
    change(msg) {
      this.$emit("transfer", msg);
    },
    // 修改作业
    editAssignment(id) {
      this.$router.push({
        name: "SubmitWork",
        query: {
          handle: "edit",
          workid: id
        }
      });
    },
    // 返回上一级
    back() {
      this.$router.go(-1);
    },
    // 判断时间是否截止
    isdeadline() { },
    // 日期数据 格式化 （公共函数）+ 数字补0操作
    addZero(num) {
      return num < 10 ? "0" + num : num;
    },
    formatDateTime(date) {
      const time = new Date(Date.parse(date));
      time.setTime(time.setHours(time.getHours() + 8));
      const Y = time.getFullYear() + "-";
      const M = this.addZero(time.getMonth() + 1) + "-";
      const D = this.addZero(time.getDate()) + " ";
      const h = this.addZero(time.getHours()) + ":";
      const m = this.addZero(time.getMinutes());
      // const s = this.addZero(time.getSeconds());
      return Y + M + D + h + m;
    },
    quitBtn() {
      this.$router.push("/home/submitjob");
    },
    gotoWork() {
      this.$router.push({
        path: "/home/submitwork",
        query: {
          testid: this.workid,
        },
      });
    },
    async getWorkDetail() {
      this.loading = true;
      let assignment_id = this.$route.query.assignment_id;
      let course_id = this.$route.query.course_id;
      console.log(course_id);
      let res = await this.$axios.post("/submitjob/getAssignmentDesc", {
        assignment_id,
        course_id,
      });
      if (res.code == 200) {
        this.loading = false;
        console.log(res);
        this.data = res.data;
        this.formatHtml();
      }
      // this.data[0].assignment_describe = `<div class="custom-content">${this.data[0].assignment_describe}</div>`
    },
    formatHtml() {
      const container = document.createElement("div");
      container.innerHTML = this.data.assignment_describe;
      Prism.highlightAllUnder(container); // 使用 Prism.js 进行代码高亮
      this.data.assignment_describe = container.innerHTML; // 存储格式化后的 HTML 字符串
    },
    writeAssignment(id) {
      console.log(id);
      this.$router.push({
        name: 'SubmitWork',
        query: { workid: id, student_assignment_id: this.$route.query.student_assignment_id }
      });
    }
  },
  mounted() {
    this.status = this.$route.query.status;
    console.log(this.status);
    this.getWorkDetail();
  },
};
</script>
<style scoped>
.detailDesc {
  width: 90%;
  margin: auto;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
}

.header {
  width: 100%;
  height: 80px;
  border-bottom: 2px solid #bbb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detail {
  width: 90%;
  margin: auto;
  /* background-color: #ccc; */
}

.detail>>>img {
  width: 50%;
}

.detail .custom-content p img {
  width: 100%;
}

/* 设计展示代码模板 */
.detail>>>pre {
  border: 1px solid #ccc;
  padding: 10px;
  background-color: #f6f8fa;
  font-family: Consolas, monospace;
}

code {
  overflow-x: auto;
  white-space: pre;
}

.language-css {
  background-color: red;
}
</style>